<template>
  <div>
    <h3>编辑换相器</h3>
    <x-button type="primary" @click.native="back">返回</x-button>
    <group class="group">
      <x-input v-if="!data" title="暂无数据" disabled></x-input>
      <x-input title="归属地：" v-model="data.location" disabled></x-input>
      <x-input title="台区号：" v-model="data.areaNo" disabled></x-input>
      <x-input title="换相器号：" v-model="data.machineNo" disabled></x-input>
      <!-- <calendar title="时间：" v-model="data.time"></calendar> -->
      <datetime v-model="time" format="YYYY-MM-DD HH:mm" title="时间："></datetime>
      <popup-radio title="支路：" :options="trackOptions" v-model="data.track">
        <p slot="popup-header" class="vux-1px-b popup-slot">请选择支路</p>
      </popup-radio>
      <popup-radio title="激活状态：" :options="activeStatusOptions" v-model="data.activeStatus" :placeholder="placeholder">
        <p slot="popup-header" class="vux-1px-b popup-slot">请选择是否激活</p>
      </popup-radio>
      <x-input title="安装地点：" placeholder="请输入内容" v-model="data.installAddress"></x-input>
    </group>
    <x-button class="save-button" type="primary" @click.native="save">保存</x-button>
    <toast v-model="showToast1" type="success" text="保存成功"></toast>
    <toast v-model="showToast2" type="cancel" text="保存失败"></toast>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, XInput, Datetime, PopupRadio,Toast, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    XInput,
    Datetime,
    PopupRadio,
    Toast, Loading
  },
  data() {
    return {
      data: {},
      watchLocation:"",
      placeholder: "",
      time: "",
      trackOptions: [
        {
          key: 1,
          value: "1"
        },
        {
          key: 2,
          value: "2"
        }
      ],
      activeStatusOptions: [
        {
          key: 1,
          value: "是"
        },
        {
          key: 0,
          value: "否"
        }
      ],

      showLoading:false,
      showToast1:false,
      showToast2:false,
    };
  },

  mounted() {
    this.getId();
  },

  watch: {
    time: function() {
      this.data.time = this.time + ":00";
    },

    watchLocation:function(){
      this.showLoading = false
    }

  },

  methods: {
    getId() {
      const id = this.$route.query.id;
      this.getData(id);
    },

    getData(id) {
      this.showLoading = true;
      const self = this;
      const param = { id: id };
      const url = "/yitai/admin/machineInfo";
      const success = function(response) {
        
        self.data = response.data.info;
        self.watchLocation = response.data.info.location;
        self.whatPlaceholder();
        self.dealTime();
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    //激活状态占位
    whatPlaceholder() {
      this.data.activeStatus == 0
        ? (this.placeholder = "否")
        : (this.placeholder = "是");
    },

    //时间格式处理
    dealTime() {
      this.time = this.data.time.slice(0, 16);
    },

    back() {
      this.$router.go(-1);
    },

    save() {
      const self = this;
      const param = {
        areaId: self.data.areaId,
        location: self.data.location,
        areaNo: self.data.areaNo,
        machineNo: self.data.machineNo,
        time: self.data.time,
        track: self.data.track,
        activeStatus: self.data.activeStatus,
        installAddress: self.data.installAddress
      };
      const url = "/yitai/admin/updateMachine";
      const success = function(response) {
        
        const status = response.data.status;
        if(status == 200){
          self.showToast1 = true;
          setTimeout(() => {
            self.back();
          }, 500);
        }
        
      };

      const failed = function() {
        
        self.showToast2 = true;
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>





<style scoped >
h3 {
  margin-bottom: 20px;
}

button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.popup-slot {
  text-align: center;
  padding: 8px 0;
  color: #888;
  font-size: 18px ;
}

.save-button {
  margin-top: 20px;
}

.group .weui-cells .weui-cell,
.group .weui-cells .vux-calendar {
  font-size: 18px ;
}

</style>